<script setup lang="ts">
import type { NavigateItemType } from '@/common/constants'

withDefaults(
  defineProps<{
    /** 是否水平显示 */
    horizontal: boolean
    /** 图标大小 */
    iconSize: 'base' | 'sm'
    navigateItem: NavigateItemType
  }>(),
  {
    horizontal: false,
    iconSize: 'base',
  },
)
</script>

<template>
  <!-- 导航项组件 -->
  <view
    class="navigate-item" :style="{ flexDirection: horizontal ? 'row' : ' column' }"
    @click="() => navigateItem.onClick()"
  >
    <view
      class="navigate-item-icon" :class="{
        'navigate-item-icon--sm': iconSize === 'sm',
      }"
    >
      <image :src="navigateItem.icon" class="navigate-item-icon-img" />
    </view>
    <text class="navigate-item-text">
      {{ navigateItem.title }}
    </text>
  </view>
</template>

<style scoped lang="scss">
.navigate-item {
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  align-items: center;

  &-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 110rpx;
    width: 110rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 110rpx;
    background-color: $uni-bg-color;
    box-shadow: $shadow-raised-1;

    &--sm {
      height: 90rpx;
      width: 90rpx;
    }

    &-img {
      width: 70%;
      height: 70%;
    }

  }

  &-text {
    font-size: $font-size-base;
    color: $uni-bg-color;
  }
}
</style>
